import { ref, watch, onMounted } from 'vue';
import { debounce } from 'lodash-es';
import type { DebouncedFunc } from 'lodash-es';
import { saveToStorage, getFromStorage, STORAGE_KEYS } from '@/utils/storageHelper';

// 防抖时间（1秒，避免频繁存储）
const DEBOUNCE_TIME = 1000;

/**
 * 画布状态持久化钩子
 * @param canvasState 画布状态（从 canvasStore 传入）
 * @returns 恢复的画布状态 + 手动保存方法
 */
export function useCanvasPersistence(canvasState: {
  scale: number;
  offset: { x: number; y: number };
  containerSize: { width: number; height: number };
}) {
  const isRestored = ref(false); // 是否已从本地恢复数据

  // 防抖保存函数（1秒内多次修改只执行一次存储）
  const debouncedSave: DebouncedFunc<() => Promise<void>> = debounce(async () => {
    await saveToStorage(STORAGE_KEYS.CANVAS_STATE, canvasState);
    console.log('[持久化] 画布状态已保存');
  }, DEBOUNCE_TIME);

  // 监听画布状态变化，自动保存
  watch(
    canvasState,
    () => {
      if (isRestored.value) { // 只有恢复数据后，才开始自动保存
        debouncedSave();
      }
    },
    { deep: true } // 深度监听对象内部属性变化
  );

  // 初始化：从本地恢复画布状态
  const restoreCanvasState = async () => {
    const savedState = await getFromStorage<typeof canvasState>(STORAGE_KEYS.CANVAS_STATE);
    if (savedState) {
      // 覆盖当前画布状态（浅拷贝，避免直接替换对象）
      canvasState.scale = savedState.scale;
      canvasState.offset = { ...savedState.offset };
      canvasState.containerSize = { ...savedState.containerSize };
      console.log('[持久化] 画布状态已恢复', savedState);
    }
    isRestored.value = true;
  };

  // 手动保存（可选，如需主动触发）
  const manualSaveCanvas = async () => {
    await saveToStorage(STORAGE_KEYS.CANVAS_STATE, canvasState);
    console.log('[持久化] 画布状态手动保存成功');
  };

  // 组件挂载时恢复数据
  onMounted(() => {
    restoreCanvasState();
  });

  return { isRestored, manualSaveCanvas };
}

/**
 * 元素数据持久化钩子
 * @param elements 元素列表（从 elementStore 传入）
 * @param selectedElementIds 选中元素ID列表（从 elementStore 传入）
 * @returns 恢复的元素数据 + 手动保存方法
 */
export function useElementsPersistence(
  elements: Record<string, import('@/types').CanvasElement>,
  selectedElementIds: string[]
) {
  const isRestored = ref(false);

  // 防抖保存函数
  const debouncedSave: DebouncedFunc<() => Promise<void>> = debounce(async () => {
    const data = { elements, selectedElementIds };
    await saveToStorage(STORAGE_KEYS.ELEMENTS, data);
    console.log('[持久化] 元素数据已保存', { elementCount: Object.keys(elements).length });
  }, DEBOUNCE_TIME);

  // 监听元素数据变化，自动保存
  watch(
    [() => elements, () => selectedElementIds],
    () => {
      if (isRestored.value) {
        debouncedSave();
      }
    },
    { deep: true }
  );

  // 初始化：从本地恢复元素数据
  const restoreElements = async (): Promise<{
    elements: typeof elements;
    selectedElementIds: typeof selectedElementIds;
  } | null> => {
    const savedData = await getFromStorage<{
      elements: typeof elements;
      selectedElementIds: typeof selectedElementIds;
    }>(STORAGE_KEYS.ELEMENTS);

    if (savedData) {
      console.log('[持久化] 元素数据已恢复', { elementCount: Object.keys(savedData.elements).length });
      return savedData;
    }
    isRestored.value = true;
    return null;
  };

  // 手动保存
  const manualSaveElements = async () => {
    const data = { elements, selectedElementIds };
    await saveToStorage(STORAGE_KEYS.ELEMENTS, data);
    console.log('[持久化] 元素数据手动保存成功');
  };

  onMounted(() => {
    restoreElements().then((savedData) => {
      if (savedData) {
        // 恢复数据（需在 Store 中处理，这里只返回数据）
        Object.assign(elements, savedData.elements);
        selectedElementIds.splice(0, selectedElementIds.length, ...savedData.selectedElementIds);
      }
      isRestored.value = true;
    });
  });

  return { isRestored, manualSaveElements };
}